<template>
  <div class="box">
    <el-row :span="15" justify="space-between;" style="padding: 30px 0">
      <el-form ref="form" label-width="100px" class="flex">
        <el-form-item label="时间" style="margin-left: 10px">
          <el-select v-model="dataParams.timeType" placeholder="请选择分类时间" style="width: 286px">
            <el-option label="按天" value="1" />
            <el-option label="按时间段" value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="投诉">
          <datePick label="统计日期" @dataTime="handleDataTime" />
        </el-form-item>
        <el-form-item label="承包区" style="margin-left: 10px">
          <networkSelect :value="'请选择所属网点'" @select="handleSelect" />
        </el-form-item>

        <el-form-item><el-button type="primary" @click="onSubmit">查询</el-button>
          <el-button @click="reast">重置</el-button></el-form-item>
      </el-form>
    </el-row>
    <el-row type="flex" justify="space-between">
      <el-col :span="6">
        <div class="borde-left">末端通知</div>
      </el-col>
    </el-row>
    <el-row :gutter="40" justify="space-between">
      <el-col :span="10">
        <div class="ech">
          <div v-if="!isObjectEmpty(endInformObj)" style="display: flex">
            <div v-for="(item, index) in endInformObj.list" :key="index">
              <div v-for="(field, fieldIndex) in endInformObj.fields" :key="fieldIndex" class="echItem">
                <div v-if="item[field.fields] && field.translate.includes('率')">
                  <span style="font-size: 18px; color: #999999">{{ field.translate }}:</span>
                  <span style="font-size: 18px">{{ Number(item[field.fields]) * 100 }}%</span>
                </div>
                <div v-if="item[field.fields] &&
                    !field.translate.includes('率') &&
                    isShowField
                  ">
                  <span style="font-size: 18px; color: #999999">{{ field.translate }}:
                    <span style="font-weight: bold; color: black">{{ item[field.fields] }}
                    </span>
                  </span>
                </div>
              </div>
              <div ref="mychart" class="echart" :style="{ float: 'left', width: '400px', height: '240px' }" />
            </div>
          </div>
        </div>
        <div v-if="isObjectEmpty(endInformObj)" style="display: flex; justify-content: center">
          <empty />
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="40">
      <el-col :span="12">
        <el-row type="flex" justify="space-between">
          <el-col :span="6">
            <div class="borde-left" style="margin-left: -1px">签收类型通知</div>
          </el-col>
        </el-row>
        <el-tabs v-model="dataParams.signType" @tab-click="handleClick('SignType')">
          <el-tab-pane label="本人签收" name="1">
            <el-row type="flex" justify="space-between">
              <el-col :span="24">
                <elltable v-if="!isObjectEmpty(signObj)" :loading="false" :data="signObj.list" :th="signObj.fields" />
                <empty v-if="isObjectEmpty(signObj)" />
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="社会代收" name="2">
            <elltable v-if="!isObjectEmpty(signObj)" :loading="false" :data="signObj.list" :th="signObj.fields" />
            <empty v-if="isObjectEmpty(signObj)" />
          </el-tab-pane>
          <el-tab-pane label="品牌代收" name="3">
            <elltable v-if="!isObjectEmpty(signObj)" :loading="false" :data="signObj.list" :th="signObj.fields" />
            <empty v-if="isObjectEmpty(signObj)" />
          </el-tab-pane>
        </el-tabs>
      </el-col>
      <el-col :span="12">
        <div class="ech">
          <el-row type="flex" justify="space-between">
            <el-col :span="6">
              <div class="borde-left" style="margin-left: -1px">平台通知</div>
            </el-col>
          </el-row>
          <el-tabs v-model="dataParams.platformId" @tab-click="handleClick('platform')">
            <el-tab-pane label="菜鸟" name="1">
              <el-row type="flex" justify="space-between">
                <el-col :span="24">
                  <elltable v-if="!isObjectEmpty(platformObj)" :loading="false" :data="platformObj.list" :th="platformObj.fields" />
                  <empty v-if="isObjectEmpty(platformObj)" />
                </el-col>
              </el-row>
            </el-tab-pane>
            <el-tab-pane label="抖音" name="2">
              <elltable v-if="!isObjectEmpty(platformObj)" :loading="false" :data="platformObj.list" :th="platformObj.fields" />
              <empty v-if="isObjectEmpty(platformObj)" />
            </el-tab-pane>
            <el-tab-pane label="拼多多" name="3">
              <elltable v-if="!isObjectEmpty(platformObj)" :loading="false" :data="platformObj.list" :th="platformObj.fields" />
              <empty v-if="isObjectEmpty(platformObj)" />
            </el-tab-pane>
            <el-tab-pane label="申通" name="4">
              <elltable v-if="!isObjectEmpty(platformObj)" :loading="false" :data="platformObj.list" :th="platformObj.fields" />
              <empty v-if="isObjectEmpty(platformObj)" />
            </el-tab-pane>
            <el-tab-pane label="快手" name="5">
              <elltable v-if="!isObjectEmpty(platformObj)" :loading="false" :data="platformObj.list" :th="platformObj.fields" />
              <empty v-if="isObjectEmpty(platformObj)" />
            </el-tab-pane>
            <el-tab-pane label="其他" name="6">
              <elltable v-if="!isObjectEmpty(platformObj)" :loading="false" :data="platformObj.list" :th="platformObj.fields" />
              <empty v-if="isObjectEmpty(platformObj)" />
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-col>
    </el-row>
    <el-row type="flex" justify="space-between">
      <el-col :span="6">
        <div class="borde-left" style="margin-left: -1px">通知明细</div>
      </el-col>
    </el-row>
    <el-tabs v-model="dataParams.collectType" @tab-click="handleClick('collectType')">
      <el-tab-pane label="网点" name="1">
        <el-row type="flex" justify="space-between">
          <el-col :span="24">
            <elltable v-if="!isObjectEmpty(sheetObj)" :loading="false" :data="sheetObj.list.data" :th="sheetObj.fields" />
            <empty v-if="isObjectEmpty(sheetObj)" />
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="承包区" name="2">
        <elltable v-if="!isObjectEmpty(sheetObj)" :loading="false" :data="sheetObj.list.data" :th="sheetObj.fields" />

        <empty v-if="isObjectEmpty(sheetObj)" />
      </el-tab-pane>
      <el-tab-pane label="小件员" name="3">
        <elltable v-if="!isObjectEmpty(sheetObj)" :loading="false" :data="sheetObj.list.data" :th="sheetObj.fields" />

        <empty v-if="isObjectEmpty(sheetObj)" />
      </el-tab-pane>
      <div v-if="!isObjectEmpty(sheetObj)" class="block" style="display: flex; justify-content: flex-end">
        <pagination :page-size="dataParams.pageDate.pageSize" :page-current="dataParams.pageDate.pageNum" :total="sheetObj.list.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>
    </el-tabs>
  </div>
</template>
<script>
import * as echarts from 'echarts'
import datePick from '@/components/menuComponent/datePick.vue'
import networkSelect from '@/components/menuComponent/NetworkSelect.vue'
import timeExamine from '@/api/zhijian/time'
import empty from '@/components/menuComponent/empty.vue'

export default {
  components: {
    datePick,
    networkSelect,
    empty
  },
  data() {
    return {
      currentName: '1',
      dataParams: {
        endTime: '',
        networkNameId: 0,
        platformId: '1',
        signType: '1',
        startTime: '',
        timeType: '1',
        collectType: '1',
        pageDate: {
          pageNum: 1,
          pageSize: 10
        }
      },
      signObj: {},
      platformObj: {},
      sheetObj: {},
      endInformObj: {},
      isShowField: false
    }
  },
  mounted() { },
  methods: {
    initEcharts(dom, index) {
      const collectDates = this.endInformObj.list[index].seven.map(
        (item) => item.collectDate
      )
      const rate = this.endInformObj.list[index].seven.map((item) => item.rate)
      const option = {
        xAxis: {
          show: false, // 设置 x 轴不显示
          type: 'category',
          data: collectDates
        },
        yAxis: {
          show: false, // 设置 y 轴不显示
          type: 'value'
        },
        tooltip: {
          trigger: 'axis', // 触发类型，坐标轴触发
          formatter: function (params) {
            return params[0].name + ': ' + Number(params[0].data) * 100 + '%'
          }
        },
        lineStyle: {
          // 阴影部分
          shadowOffsetX: 0, // 折线的X偏移
          shadowOffsetY: 9, // 折线的Y偏移
          shadowBlur: 8, // 折线模糊
          shadowColor: 'rgba(145, 132, 132, 1)' // 折线颜色
        },

        series: [
          {
            data: rate,
            type: 'line',
            smooth: true,
            lineStyle: {
              color: 'blue'
            },
            symbol: 'none',
            areaStyle: {
              // 区域填充渐变颜色
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: 'rgba(32, 135, 208, 1)' // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: 'rgba(255, 255, 255, 0)' // 100% 处的颜色
                  }
                ],
                global: false // 缺省为 false
              }
            }
          }
        ]
      }
      const mychart = echarts.init(dom) // 图标初始化
      mychart.setOption(option) // 渲染页面
      // 随着屏幕大小调节图表
      window.addEventListener('resize', () => {
        mychart.resize()
      })
    },
    isObjectEmpty(obj) {
      return Object.keys(obj).length === 0
    },
    handleClick(code) {
      switch (code) {
        case 'SignType':
          this.signObj = {}
          this.getCollectSignType()
          break
        case 'platform':
          this.platformObj = {}
          this.getCollectPlatform()
          break
        case 'collectType':
          this.sheetObj = {}
          this.getSheetCollect()
          break
        default:
          break
      }
    },
    handlePlatformClick() { },
    handleSelect(val) {
      this.dataParams.networkNameId = val
      console.log('select', val)
      // this.getTimeAll()
    },
    reast() {
      this.dataParams = {
        endTime: '',
        networkNameId: 0,
        platformId: '1',
        signType: '1',
        startTime: '',
        timeType: '1',
        collectType: '1',
        pageDate: {
          pageNum: 1,
          pageSize: 100
        }
      }
      this.signObj = {}
      this.platformObj = {}
      this.sheetObj = {}
      this.endInformObj = {}
      console.log('输出重置')
    },
    handleSizeChange(val) {
      this.dataParams.pageDate.pageSize = val
      this.getSheetCollect()

      console.log('改变size', val)
    },
    handleCurrentChange(val) {
      this.dataParams.pageDate.pageNum = val
      this.getSheetCollect()

      console.log('改变页码', val, this.dataParams)
    },
    handleDataTime(val) {
      this.dataParams.startTime = val[0]
      this.dataParams.endTime = val[1]
      // this.getTimeAll()
    },
    onSubmit() {
      if (this.dataParams.networkNameId === 0 || '') {
        this.$message('请选择网点')
        return
      }
      if (this.dataParams.endTime === '' || this.dataParams.startTime === '') {
        this.$message('请选择投诉日期')
        return
      }
      this.getCollectEndInform()
      this.getCollectPlatform()
      this.getCollectSignType()
      this.getSheetCollect()
      console.log('提交', this.dataParams)
    },
    // 末端通知
    getCollectEndInform() {
      timeExamine.collectEndInform(this.dataParams).then((res) => {
        if (res.code === 200) {
          this.endInformObj = res.data
          setTimeout(() => {
            this.isShowField = true
          }, 300)
          this.$nextTick(() => {
            const domList = this.$refs.mychart
            console.log('domList', domList)
            domList.forEach((dom, index) => {
              console.log('this.$refs.e', dom)
              this.initEcharts(dom, index)
            })
          })

          console.log('末端通知res', res.data)
        }
      })
    },
    // 平台通知
    getCollectPlatform() {
      timeExamine.collectPlatform(this.dataParams).then((res) => {
        if (res.code === 200) {
          this.platformObj = res.data
          console.log('平台通知res', res)
        }
      })
    },
    // 签收类型通知
    getCollectSignType() {
      timeExamine.collectSignType(this.dataParams).then((res) => {
        if (res.code === 200) {
          this.signObj = res.data
          console.log('签收类型通知res', res)
        }
      })
    },
    // 通知明细
    getSheetCollect() {
      timeExamine.sheetCollect(this.dataParams).then((res) => {
        if (res.code === 200) {
          this.sheetObj = res.data
          console.log('通知明细res', res)
        }
      })
    }
  }
}
</script>
<style
  lang="scss"
  scoped
>
.box {
  padding: 0px 20px;
}

.borde-left {
  border-left: 3px solid #2087d0;
  padding-left: 10px;
}

.flex {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
}

.ech {
  display: flex;
  flex-flow: column;
  position: relative;
}

.echItem {
  width: 420px;
}

.ech-top {
  height: 140px;
  display: flex;
  flex-flow: column;
  justify-content: space-evenly;
  align-items: flex-start;
  padding-left: 20px;
}

.ech-left {
  width: 450px;
  display: flex;
  align-items: flex-start;
}

.ech-left > div {
  min-height: 100px;
  width: 353px;
  display: flex;
  flex-flow: column;
  justify-content: space-evenly;
  align-items: flex-start;
}

.flex-bettom {
  display: flex;
  justify-content: space-between;
}

.header {
  padding: 20px 0;
  border-bottom: 1px solid #ccc;
}

.el-row {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}

.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
